<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="二级机构" prop="departmentOrgId"  class="item">
            <span>{{form.departmentOrgName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="所在实验室" prop="laboratoryId"  class="item">
            <span>{{laboratoryIdFormat(form.laboratoryId)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="实验中心" prop="laboratoryCenteryId"  class="item">
            <span>{{laboratoryCenteryFormat(form.laboratoryCenteryId)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="实验地点" prop="laboratoryAddress"  class="item">
            <span>{{form.laboratoryAddress}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开发项目类型" prop="projectType"  class="item">
            <span>{{developmentProjectTypeFormat(form.projectType)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="开放形式" prop="openForm"  class="item">
            <span>{{openFormFormat(form.openForm)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申报学时" prop="reportingHours"  class="item">
            <span>{{form.reportingHours}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="指导学生人数" prop="reportInstructedStudentsNumber"  class="item">
            <span>{{form.reportInstructedStudentsNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申报分组数" prop="reportGroupNumber"  class="item">
            <span>{{form.reportGroupNumber}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="分组每组人数" prop="reportGroupPerNumber"  class="item">
            <span>{{form.reportGroupPerNumber}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="申报耗材费" prop="reportConsumablesFee"  class="item">
            <span>{{form.reportConsumablesFee}}万元</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="成果主要形式" prop="experimentalResultsMainForm"  class="item">
            <span>{{mainFormsExperimentalResultsFormat(form.experimentalResultsMainForm)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人姓名" class="item" >
          <span>{{form.projectContactLeader}}</span>
          </el-form-item>
      </el-col>
        <el-col :span="9">
          <el-form-item label="负责人职称" class="item" >
          <span>{{form.ownerTitle}}</span>
          </el-form-item>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="负责人电话" class="item" >
          <span>{{form.contactPhone}}</span>
          </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="负责人邮箱" class="item" >
        <span>{{form.ownerEmail}}</span>
        </el-form-item>
    </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {searchEmployee} from "@/api/labdata/employee";
import {getOrgByFunctionOpt,listSecondOrgLab} from "@/api/labdata/orgnization";
import { getOrgName} from "@/api/labdata/orgnization";
import {listEmployee} from "@/api/labdata/employee";
  export default {
    name: "ProjectDevelopmentProjectDetail",
    data() {
      return {
        // 实验中心
        laboratoryCenteryList:[],
        // 开发项目类型
        developmentProjectTypeOptions:[],
        // 开放形式
        openFormOptions:[],
        // 实验成果主要形式
        mainFormsExperimentalResultsOptions:[],
         //部门列表
         deptList:[],
        // 部门树选项
        deptOptions: [],
       //员工列表
       userList: [],
         //二级机构
      secondOrgList: [],
      //二级机构下的实验室
      secondOrgLabList: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        ownerPhone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        siteLocation: [
          { required: true, message: "实验室场地位置不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]

        }
      };
    },
    props:{
      developmentProject:Object,
    },
    created() {
      this.getDicts("development_project_type").then(response => {
        this.developmentProjectTypeOptions = response.data;
      });
       this.getDicts("open_form").then(response => {
        this.openFormOptions = response.data;
      });
      this.getDicts("main_forms_experimental_results").then(response => {
        this.mainFormsExperimentalResultsOptions = response.data;
      });
        getOrgByFunctionOpt(2).then(response => {
        this.secondOrgList = response.data;
        this.$forceUpdate();
      });
      getOrgByFunctionOpt(3).then(response => {
          this.laboratoryCenteryList = response.data
        });
      listSecondOrgLab( this.developmentProject.departmentOrgId).then(response => {
            this.secondOrgLabList = response.data;
            this.$forceUpdate();
       });
        if(this.developmentProject){
          this.form = this.developmentProject;
          this.searchUser();
          this.getDeptName();
        }else{
          this.form  = {};
        }

    },
    methods: {
      getDevelopmentProject(){
        return this.form;
      },
      getDeptName(){
        getOrgName(this.form.departmentOrgId).then(response=>{
          this.form.departmentOrgName = response.msg;
          this.$forceUpdate();
        });
      },
      // 输入工号搜索
      searchUser(){
        if(!this.form.projectOwnerId){
          this.form.projectContactLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectContactLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectContactLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

      handleLabChange(item) {
      if (item) {
        this.form.laboratoryId = null;
        listSecondOrgLab(item).then(response => {
          this.secondOrgLabList = response.data;
        });
      }
    },

      // 实验中心字典翻译
      laboratoryCenteryFormat(value) {
       var  datas = this.laboratoryCenteryList
        for(let key in datas){
            if(datas[key].orgId == value){
                return datas[key].orgName;
            }
        }
        return "";
     },
     // 所在实验室字典翻译
     laboratoryIdFormat(value) {
       let  datas = this.secondOrgLabList
        for(let key in datas){
            if(datas[key].orgId== value){
                return datas[key].orgName;
            }
        }
        return "";
     },
        // 开发项目类型翻译
        developmentProjectTypeFormat(value) {
        var  datas = this.developmentProjectTypeOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },
        // 开放形式翻译
        openFormFormat(value) {
        var  datas = this.openFormOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },
        // 实验成果主要形式翻译
        mainFormsExperimentalResultsFormat(value) {
        var  datas = this.mainFormsExperimentalResultsOptions
        for(let key in datas){
            if(datas[key].dictValue == value){
                return datas[key].dictLabel;
            }
        }
        return "";
     },
    }

  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .table_button {
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    border-bottom: 1px solid #f6f5f5;
    color: #43bef8;
    cursor: pointer;
    border: 0;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
</style>
